<template>
  <s-layout
    title="分类"
    tabbar="/pages/index/category1"
    :bgStyle="{ color: '#fff' }"
  >
    <view class="s-category">
      <view
        class="three-level-wrap ss-flex ss-col-top"
        :style="[{ height: pageHeight + 'px' }]"
      >
        <scroll-view
          :scroll-into-view="itemId"
          scroll-with-animation
          class="side-menu-wrap"
          :scroll-top="scrollTop"
          scroll-y
          :style="[{ height: pageHeight + 'px' }]"
        >
          <view
            class="menu-item ss-flex"
            v-for="(item, index) in state.categoryList"
            :id="`leftIndex${index}`"
            :key="item.id"
            :class="[{ 'menu-item-active': index == state.activeMenu }]"
            @tap="onMenu(index)"
          >
            <view class="menu-title ss-line-1">
              {{ item.name }}
            </view>
          </view>
        </scroll-view>
        <scroll-view
          class="goods-list-box"
          :scroll-into-view="rightItemId"
          :scroll-top="scrollRightTop"
          @scroll="rightScroll"
          scroll-with-animation
          scroll-y
          :style="[{ height: pageHeight + 'px' }]"
        >
          <view
            class="menu-sub-box"
            :id="`rightIndex${index}`"
            v-for="(item, index) in state.categoryList"
            :key="index"
          >
            <view class="title">
              {{ item.name }}
            </view>

            <view class="category-box">
              <view
                class="category-item"
                v-for="(category, idx) in item.children"
                :key="idx"
                @tap="
                  sheep.$router.go('/pages/goods/list', {
                    categoryId: category.id,
                  })
                "
              >
                <view>
                  <image
                    style="width: 100rpx; height: 100rpx; border-radius: 30rpx"
                    :src="category.icon"
                  ></image>
                </view>
                <view style="text-align: center">{{ category.name }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import secondOne from "./components/second-one.vue";
import thirdOne from "./components/third-one.vue";
import firstOne from "./components/first-one.vue";
import firstTwo from "./components/first-two.vue";
import sheep from "@/sheep";

import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { computed, reactive, ref, onMounted } from "vue";
import _ from "lodash";
const that = getCurrentPages().pop(); // 获取当前页面实例
let itemId = ref("");
let scrollRightTop = ref(0);
const scrollTop = ref(0);
const rightItemId = ref("");
const rectInfoList = ref([]);
const state = reactive({
  categoryList: [],
  activeMenu: "0",

  pagination: {
    data: [],
    current_page: 1,
    total: 1,
    last_page: 1,
  },
  loadStatus: "",
});

const { screenHeight, safeAreaInsets, screenWidth, safeArea } =
  sheep.$platform.device;
const pageHeight = computed(() => safeArea.height - 44 - 50);

async function getList(options) {
  const res = await sheep.$api.category.list();
  state.categoryList = [];
  state.categoryList = res.filter(
    (item) => item.children?.length > 0 && !["电影", "蛋糕"].includes(item.name)
  );

  setTimeout(() => {
    state.categoryList.map((item, index) => {
      const query = uni.createSelectorQuery();
      // console.log(query)
      query
        .select(`#rightIndex${index}`)
        .boundingClientRect((rect) => {
          // console.log('rect', rect)
          rectInfoList.value.push(rect);
        })
        .exec();
    });
  }, 1000);

  if (options && options.params) {
    const opt = JSON.parse(options.params);
    const index = state.categoryList.findIndex((item) => item.id === opt.id);
    state.activeMenu = index;
    rightItemId.value = `rightIndex${index}`;
  }

  // state.activeMenu = val;

  // if (error === 0) {
  //   state.categoryList = data;
  // }
}

const onMenu = (val) => {
  state.activeMenu = val;

  rightItemId.value = `rightIndex${val}`;
  console.log("val", val);
};

async function getGoodsList(id, page = 1, list_rows = 6) {
  state.loadStatus = "loading";
  const res = await sheep.$api.goods.list({
    category_id: id,
    list_rows,
    page,
  });
  if (res.error === 0) {
    let couponList = _.concat(state.pagination.data, res.data.data);
    state.pagination = {
      ...res.data,
      data: couponList,
    };
    if (state.pagination.current_page < state.pagination.last_page) {
      state.loadStatus = "more";
    } else {
      state.loadStatus = "noMore";
    }
  }
}

function rightScroll(e) {
  console.log("rightScroll", e);

  let scrollTop = e.detail.scrollTop;
  const length = rectInfoList.value.length;
  for (var i = 0; i < rectInfoList.value.length; i++) {
    let h1 = rectInfoList.value[i].top - 100;
    let h2 = 0;
    if (i === length - 1) {
      h2 = rectInfoList.value[i].top - 100;
    } else {
      h2 = rectInfoList.value[i + 1].top - 100;
    }
    if (scrollTop >= h1 && scrollTop < h2) {
      itemId.value = `leftIndex${i}`;
      state.activeMenu = i;
      console.log(i);
      break;
    } else if (scrollTop < rectInfoList.value[0].top) {
      itemId.value = "";
      break;
    }
  }
}

// 加载更多
function loadmore() {
  if (state.loadStatus !== "noMore") {
    getGoodsList(
      state.categoryList.children[state.activeMenu].id,
      state.pagination.current_page + 1
    );
  }
}
onLoad(async (options) => {
  await getList(options);

  // if (state.categoryList.style === 'first_one' || state.categoryList.style === 'first_two') {
  // 	getGoodsList(state.categoryList.children[0].id);
  // }
});
onReachBottom(() => {
  loadmore();
});
</script>

<style lang="scss" scoped>
.s-category {
  :deep() {
    .side-menu-wrap {
      width: 200rpx;
      height: 100%;
      padding-left: 12rpx;
      background-color: #f6f6f6;

      .menu-item {
        width: 100%;
        height: 88rpx;
        position: relative;
        transition: all linear 0.2s;

        .menu-title {
          line-height: 32rpx;
          font-size: 30rpx;
          font-weight: 400;
          color: #333;
          margin-left: 28rpx;
          position: relative;
          z-index: 0;

          // &::before {
          //   content: '';
          //   width: 64rpx;
          //   height: 12rpx;
          //   background: linear-gradient(
          //     90deg,
          //     var(--ui-BG-Main-gradient),
          //     var(--ui-BG-Main-light)
          //   ) !important;
          //   position: absolute;
          //   left: -64rpx;
          //   bottom: 0;
          //   z-index: -1;
          //   transition: all linear 0.2s;
          // }
        }

        &.menu-item-active {
          background-color: #fff;
          border-radius: 20rpx 0 0 20rpx;

          &::before {
            content: "";
            position: absolute;
            right: 0;
            bottom: -20rpx;
            width: 20rpx;
            height: 20rpx;
            background: radial-gradient(
              circle at 0 100%,
              transparent 20rpx,
              #fff 0
            );
          }

          &::after {
            content: "";
            position: absolute;
            top: -20rpx;
            right: 0;
            width: 20rpx;
            height: 20rpx;
            background: radial-gradient(
              circle at 0% 0%,
              transparent 20rpx,
              #fff 0
            );
          }

          .menu-title {
            font-weight: 600;
            color: #ff7a0c !important;

            &::before {
              left: 0;
            }
          }
        }
      }
    }

    .goods-list-box {
      background-color: #f6f6f6;
      width: calc(100vw - 100px);
      padding: 10px;

      .menu-sub-box {
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        padding: 20rpx;

        .title {
          font-size: 30rpx;
          font-weight: bold;
        }

        .category-box {
          margin-top: 20rpx;
          display: flex;
          // justify-content: space-around;
          flex-wrap: wrap;

          .category-item {
            flex: 0 0 33%;
            text-align: center;
          }
        }
      }
    }

    .banner-img {
      width: calc(100vw - 130px);
      border-radius: 5px;
      margin-bottom: 20rpx;
    }
  }
}
</style>